<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <!-- 标题 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <a-row type="flex" justify="space-between" align="bottom">
              <!-- title -->
              <div class="card-title-p">
                {{ this.title }}
              </div>
              <div class="card-title-more" @click="locationTo('/trainingServices.html')">
                {{ `${this.more} >` }}
              </div>
            </a-row>
            <a-divider class="card-title-divider"/>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <home-swiper>
              <swiper-slide class="swiper-no-swiping" v-for="(slide,index) in slideArr" :key="index">
                <a-card>
<!--                  <video-player class="video-player vjs-custom-skin"
                                ref="videoPlayer"
                                slot="cover"
                                :playsinline="true"
                                :options="playerOptions[index]">
                  </video-player>-->

                  <ssrVideo class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            slot="cover"
                            :playsinline="true"
                            :options="playerOptions[index]">
                  </ssrVideo>
                  <a-row>
                    <p class="slide-title">{{ slide.title }}</p>
                  </a-row>
                  <a-row type="flex" justify="space-between" class="card-bottom-row">
                    <a-col>
                      <div class="slide-type">
                        <p class="slide-type-p">{{ slide.type }}</p>
                      </div>
                    </a-col>
                    <a-col>
                      <span class="slide-time">{{ slide.dateTime }}</span>
                    </a-col>
                  </a-row>
                </a-card>
              </swiper-slide>
            </home-swiper>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import HomeSwiper from "~/components/swiper/HomeSwiper";
// import {SwiperSlide} from 'vue-awesome-swiper'
// import {videoPlayer} from 'vue-video-player'
import SsrVideo from '~/components/video/SsrVideo'

export default {
  name: "Train",
  data() {
    return {
      title: '培训体验',
      more: '查看更多',
      slideArr: [
        {bannerUrl: 'https://www.sx12316.cn/attached/media/20190819/20190819170700oey7xh.mp4', title: '芬特液压翻转犁', type: '益农社培训', dateTime: '2021-01-08 10:00'},
        {bannerUrl: 'https://www.sx12316.cn/attached/media/20210423/20210423163520q7gs6a.mp4', title: '克拉斯青储收获机', type: '益农社培训', dateTime: '2021-01-08 10:00'},
        {bannerUrl: 'https://www.sx12316.cn/attached/media/20210423/202104231623384aavrt.mp4', title: '阿玛松液压翻转犁', type: '益农社培训', dateTime: '2021-01-08 10:00'},
        {bannerUrl: 'https://www.sx12316.cn/attached/media/20210423/20210423164301cwjjfh.mp4', title: '科罗尼青储收获机', type: '益农社培训', dateTime: '2021-01-08 10:00'},
        {bannerUrl: 'https://www.sx12316.cn/attached/media/20210423/20210423161822duvsq8.mp4', title: '雷肯青储收获机', type: '益农社培训', dateTime: '2021-01-08 10:00'}
      ],
      playerOptions: []
    }
  },
  components: {
    // SwiperSlide,
    HomeSwiper,
    SsrVideo
    // videoPlayer
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    locationTo(url, id) {
      // window.location = localStorage.getItem('contextPrefix') + url
    },
    videoOptionHandler(bannerUrl) {
      let videoOption = {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: bannerUrl // url地址
          }
        ],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: false, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }

      this.playerOptions.push(videoOption)
    }
  },
  mounted() {
    this.slideArr.forEach(item => {
      this.videoOptionHandler(item.bannerUrl)
    })
  }
}
</script>

<style lang="scss" scoped>
@import "/assets/styles/base";

.slide-video {
  height: 100%;
  width: 100%;
}

.slide-title {
  letter-spacing: 0.12em;
  margin-bottom: 0.4em;
  font-weight: 543;
  font-size: 1.3em;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/deep/ .card-bottom-row {
  border-color: black !important;
  display: flex;
  align-items: center;
}

/deep/ .ant-card-body {
  padding: 1em;
}

.slide-type {
  border: 0.15em solid rgba(249, 153, 32, 0.8);
  border-radius: 0.2em;
  font-weight: 500;
  text-align: center;
  height: 1.7em;
  width: 100%;
  color: rgb(249, 153, 32);
  letter-spacing: 0.1em;

  .slide-type-p {
    padding: 0.05em;
  }
}

.slide-time {
  color: rgba(161, 161, 161, 0.9);
}

/deep/ .vjs-big-play-button {
  border-radius: 0.5em;
  border: 0;
}

/deep/ .video-js:hover .vjs-big-play-button, .vjs-custom-skin > .video-js .vjs-big-play-button:focus, .vjs-custom-skin > .video-js .vjs-big-play-button:active {
  background-color: rgba(5, 150, 85, 0.9);
}
</style>
